<template>
    <a-modal width="400px" v-model:open="open" title="快捷键" :footer="null">
        <Items :ctrl="1" name="保存" keypass="S" />
        <Items :ctrl="1" name="预览" keypass="P" />
        <br>
        <Items :ctrl="1" name="撤销" keypass="Z" />
        <Items :ctrl="1" :shift="1" name="重做" keypass="Z" />
        <br>
        <Items :ctrl="1" name="复制" keypass="C" />
        <Items :ctrl="1" name="剪切" keypass="X" />
        <Items :ctrl="1" name="粘贴" keypass="V" />
        <Items name="删除节点" keypass="BackSpace" keypass2="Delete" />
        <br>
        <Items name="选择父级节点" keypass="↑" />
        <Items name="选择子集节点" keypass="↓" />
        <Items name="向左选择兄弟节点" keypass="←" />
        <Items name="向右选择兄弟节点" keypass="→" />
        <br>
        <Items name="复制拖拽节点" :alt="1" keypass="拖动" />
    </a-modal>
</template>
<script setup>
import { h } from 'vue';
const Items = function (props) {
    return h('div', { class: 'Items' }, [
        h('div', { class: 'Name', }, props.name),
        h('div', { class: 'keys' }, [
            !!props.ctrl && h('div', { class: 'keyPress isKey' }, 'Ctrl'),
            !!props.shift && h('div', { class: 'keyPress isKey' }, 'Shift'),
            !!props.alt && h('div', { class: 'keyPress isKey' }, 'Alt'),
            h('div', { class: 'keyPress' }, props.keypass),
            !!props.keypass2 && h('div', {}, '/'),
            !!props.keypass2 && h('div', { class: 'keyPress' }, props.keypass2),
        ])
    ])
}
Items.props = ['ctrl', 'shift', 'alt', 'keypass', 'keypass2', 'name'];
const open = defineModel('open');


</script>
<style scoped lang="less">
.Items {
    display: flex;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    justify-content: space-between;
    position: relative;

    &:hover {
        background-color: rgba(0, 0, 0, 0.05);
    }

    :deep(.keys) {
        display: flex;
    }

    :deep(.keyPress) {
        &.isKey::after {
            content: '+';
            position: absolute;
            margin-left: 12px;
        }

        color: #666;
        margin: 0 8px 0 8px;
        border: 1px solid #ccc;
        padding: 0 8px;
        border-radius: 4px;
    }
}
</style>